<template>
  <div class="header-info-wrapper">
    <div :class="'header-avatar-wrapper ' + collapseClass">
      <el-avatar class="header-avatar" :icon="UserFilled" />
    </div>
    <div :class="'user-info-wrapper ' + collapseClass">
      <div :class="'username ' + collapseClass">HouYong022</div>
      <div :class="'vip ' + collapseClass"><el-tag class="e-tag">VIP</el-tag>  会员</div>
    </div>
    <div class="topic-button-wrapper">
      <el-button :class="`chat-topic-btn ` + collapseClass" type="primary" :icon="Plus" @click="newTopic">
        {{isCollapse? '' : '新建话题'}}
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import {UserFilled, Plus} from "@element-plus/icons-vue";
import {computed} from "vue";
import {useRouter} from "vue-router";
import topicStore from "@/stores/topic";

const {addTopic} = topicStore();
const  props = defineProps({
  isCollapse: Boolean
});
const router = useRouter();

const collapseClass = computed(() => props.isCollapse ? 'collapse': '');

const newTopic = async () => {
  const res = await addTopic();
  if(res){
    await router.push('/chat?topic_id=' + res.topicId);
  }
}
</script>

<style lang="less" scoped>
@import "../assets/common.less";
.header-info-wrapper {
  width: 100%;
  .header-avatar-wrapper {
    margin: 32px auto 0 auto;
    width: 64px;
    height: 64px;
    .header-avatar {
      height: 100%;
      width: 100%;
      font-size: 36px;
    }
  }
  .header-avatar-wrapper.collapse {
    width: 40px;
    height: 40px;
  }
  .user-info-wrapper {
    display: flex;
    padding-left: 40px;
    font-size: 14px;
    padding-top: 20px;
    color: @mainWhite;
    .username {
      padding-right: 20px;
    }
    .username.collapse {
      display: none;
    }
    .vip {
      .e-tag {
        width: 23px;
        height: 14px;
        padding-right: 6px;
      }
    }
  }
  .user-info-wrapper.collapse {
    padding-left: 6px;
  }
  .topic-button-wrapper {
    width: 100%;
    margin-top: 12px;
    display: flex;
    .chat-topic-btn {
      width: 168px;
      height: 36px;
      color: @mainBlue;
      font-size: 14px;
      border-radius: 4px;
      background: @mainWhite;
      margin: auto;
    }
    .chat-topic-btn.collapse{
      background: @mainBlue;
      width: 36px;
      height: 36px;
      border-radius: 4px;
      border-color: @mainWhite;
      color: @mainWhite;
      border-width: 2px;
      padding-left: 19px;
    }
  }
}
</style>